<template>
  <view class="store-list-container">
    <view class="header">
      <picker @change="changeCity" :value="currentCityIndex" :range="cityList">
        <view class="city-picker">
          {{ cityList[currentCityIndex] }}
        </view>
      </picker>
      <input type="text" placeholder="搜索门店">
      <image src="/static/location-icon.png" mode="aspectFit" @click="re定位"></image>
    </view>
    <scroll-view class="store-list" scroll-y>
      <view class="store-item" v-for="(store, index) in stores" :key="index">
        <view class="store-info">
          <image src="/static/logo.png" mode="aspectFit" class="logo"></image>
          <view class="store-details">
            <view class="store-name">
              {{ store.name }}
              <image src="/static/call-icon.png" mode="aspectFit" class="call-icon"></image>
            </view>
            <view class="store-address">
              {{ store.address }}
            </view>
            <view class="store-status">
              <view v-if="store.status === '营业中'" class="status-tag-open">营业中</view>
              <view v-else class="status-tag-rest">门店休息</view>
              <view v-if="store.preOrder" class="status-tagpreOrder">接受预定</view>
            </view>
          </view>
        </view>
        <view class="operation">
          <view class="distance-tag">
            <text>↑{{ store.distance }}</text>
          </view>
          <button class="join-btn">加入</button>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cityList: ['西安市', '其他城市'],
      currentCityIndex: 0,
      stores: [
        {
          name: '锦业路店',
          address: '陕西省西安市未央区锦业路与西三环交叉口尚品美地城一层',
          status: '营业中',
          preOrder: true,
          distance: '53.4m'
        },
        {
          name: '科技路店',
          address: '陕西省西安市未央区科技路与团结南路交叉口紫薇臻品南门',
          status: '营业中',
          preOrder: true,
          distance: '5.7km'
        },
        {
          name: '文景路店',
          address: '陕西省西安市未央区文景路与凤城十一路交叉口文景广场4层',
          status: '营业中',
          preOrder: true,
          distance: '19.8km'
        },
        {
          name: '广安路店',
          address: '陕西省西安市未央区广安路新房村南门西侧',
          status: '休息',
          preOrder: false,
          distance: '20.2km'
        }
      ]
    };
  },
  methods: {
    changeCity(e) {
      this.currentCityIndex = e.target.value;
    },
    re定位() {
      // 重新定位逻辑
    }
  }
};
</script>

<style scoped lang="scss">
.store-list-container {
  background: #f5f5f5;
  padding: 20rpx;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.city-picker {
  padding: 15rpx 20rpx;
  background: white;
  border-radius: 30rpx;
  margin-right: 20rpx;
}

input {
  flex: 1;
  padding: 15rpx 20rpx;
  border-radius: 30rpx;
  border: none;
  background: #f5f5f5;
}

.header image {
  width: 60rpx;
  height: 60rpx;
  margin-left: 20rpx;
}

.store-item {
  background: white;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: space-between;
}

.logo {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
}

.store-details {
  flex: 1;
}

.store-name {
  font-size: 32rpx;
  margin-bottom: 10rpx;
  display: flex;
  align-items: center;

  .call-icon {
    width: 40rpx;
    height: 40rpx;
    margin-left: 20rpx;
  }
}

.store-address {
  color: #666;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.store-status {
  display: flex;
  align-items: center;

  .status-tag-open {
    background: #f0f0f0;
    color: #666;
    padding: 6rpx 12rpx;
    border-radius: 4rpx;
    margin-right: 10rpx;
  }

  .status-tag-rest {
    background: #f0f0f0;
    color: #666;
    padding: 6rpx 12rpx;
    border-radius: 4rpx;
    margin-right: 10rpx;
  }

  .status-tagpreOrder {
    background: #f0e6d1;
    color: #666;
    padding: 6rpx 12rpx;
    border-radius: 4rpx;
  }
}

.operation {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  .distance-tag {
    background: #f0f0f0;
    color: #666;
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    margin-bottom: 10rpx;
  }

  .join-btn {
    background: #fff;
    color: #333;
    padding: 10rpx 20rpx;
    border-radius: 4rpx;
    border: 1rpx solid #ddd;
  }
}
</style>